<template>
  <view class="invitation">
    <uni-nav-bar title="邀请好友" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar background-color="#4B6DEA"
      color="#fff" rightText="我的收益" @clickRight="navTo('invitation/income')"></uni-nav-bar>
    <image :src="imageIcon.image" mode="" style="width: 88%;height: 891rpx;margin: 60rpx 6% 0px;border-radius: 30rpx;">
    </image>
    <view class="package column" style="color:#fff;background-color: transparent;">
      <view style="margin-bottom: 20rpx;">活动下线</view>
      <view v-html="content"></view>
    </view>
  </view>
  <webWechat :path="path" :title="text"></webWechat>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import webWechat from '@c/pobulic/webWechat.vue';
  import { ref } from 'vue';
  import { showLoading } from '@/utils/prompt';
  import { onLoad } from '@dcloudio/uni-app';
  import { getYxQrcode } from '@/gql/invitation';
  import { useUserStore } from '@/stores/user';
  import { authorMe } from '@/gql/user';
  import { toPublish } from '@mqtt';
  import { getDriverID } from '@/stores/driverID';
  const driver_id = getDriverID();
  const userInfo = useUserStore();
  /**
   * 邀请好友
   * @property {String} imageIcon 邀请图
   * @property {String} content 活动内容
   * @property {String} path 邀请路径
   * @property {String} text 邀请名称
   */
  const imageIcon = ref('')
  const content = ref()
  const path = ref('')
  const text = ref('')
  onLoad(() => {
    const name = userInfo.realname ? userInfo.realname : userInfo.nickname
    text.value = name + '邀您领取安蓝福利品';
    const time = Date.parse(new Date())
    path.value = `https://wx.anlan.tech/#/?type=yaoxin&zhitui_id=${driver_id}&key=${time}`;
  })
  init()
  function init() {
    showLoading()
    const payload = {
      query: getYxQrcode,
      variables: {
        driver_id,
      },
    };
    toPublish(
      'ql/driver/getYxQrcode',
      payload,
      (obj : any) => {
        const { data } = obj;
        imageIcon.value = data.getYxQrcode
      }
    );
  }
  particulars()
  function particulars() {
    showLoading('加载中');
    const payload = {
      query: authorMe,
      variables: {
        code: 'yxsm',
      },
    };
    toPublish('ql/driver/getMyblock', payload, (obj : any) => {
      const { get_myblock } = obj.data;
      content.value = get_myblock.content
    });
  }
</script>

<style scoped lang="less">
  .center {
    margin: 60rpx auto 0px;
    width: 630rpx;
    height: 891rpx;
    background-image: url(https://admin.anlan.tech/uploads/20230707/b1893722dc9443d9c95c3e76dd270e96.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .frame {
    justify-content: flex-start;

    .icon {
      margin-top: 10rpx;
      width: 142rpx;
      height: 142rpx;
      border-radius: 50%;
    }

    .case {
      height: 609rpx;
      justify-content: space-between;

      view:nth-of-type(1) {
        font-size: 60rpx;
        font-family: PangMenZhengDao-3;
        font-weight: 400;
        font-style: italic;
        color: #477BEF;
      }

      image {
        width: 257rpx;
        height: 257rpx;
        background: #FFFFFF;
        border-radius: 5px;
        border: 7px solid #E4E9FE;
      }

      .but {
        width: 220rpx;
        height: 68rpx;
        background: #496CE9;
        border-radius: 34rpx;
        text-align: center;
        line-height: 68rpx;
        color: #fff;
      }
    }
  }
</style>
<style>
  page {
    background: linear-gradient(180deg, #4B6DEA, #4193F9);
    height: 100vh;
    overflow: auto;
  }

  .invitation>>>.uni-navbar--border {
    border: none;
  }
</style>